<template>
  <div class='u-createAttr'>
    <el-dialog
      title="添加属性"
      :visible.sync="dialogVisible2"
      :before-close="() => {this.dialogVisible2 = false}">
      <el-form label-width="100px">
        <el-form-item label='属性名称'>
          <el-input v-model.trim='addValueKey' />
        </el-form-item>
        <el-form-item label='添加属性值'  style='margin-top: 20px'>
          <div class='addValue-list' v-show='addValueList.length < limit'>
            <el-input v-model.trim='addValueValue' /><i class='el-icon-plus icon' @click='pushAddValue'></i>
          </div>
          <div class='addValue-list-child addValue-list' v-for='(v, i) in addValueList' :key='i'>
            <p>{{ v.name }}</p><i class='el-icon-close icon' @click='deleteAddValue(i)'></i>
          </div>
        </el-form-item>
        <div class='btnWrap'>
          <el-button type='primary' @click='addSku(1)'>确定</el-button><el-button @click='dialogVisible2 = false'>取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import md5 from 'blueimp-md5'

/**
 * 创建自定义属性模块
 */

export default {

  name: 'CreateAttribute',

  /**
   * @param {String} openType 打开的方式，add or edit
   * @param {Number} selectIndex 编辑时，点击的位置
   * @param {String} skuId 要编辑的 skuId
   * @param {Number} limit 可添加的分类数量
   */
  props: ['openType', 'selectIndex', 'skuId', 'limit'],

  data() {
    return {
      // 添加属性
      dialogVisible2: false,
      isCheckSku2: false,
      addValueKey: '',
      addValueValue: '',
      addValueList: [],
      selectIndex2: -1,
      customList: []
    }
  },

  methods: {
    clearForm() {
      this.customList = []
      this.addValueList = []
      this.addValueKey = ''
      this.addValueValue = ''
    },

    pushAddValue() {
      if (!/^.{2,100}$/.test(this.addValueValue)) {
        return this.__notify('添加属性值', '2-100个字符', 'warning')
      }
      this.addValueList.push({
        name: this.addValueValue, id: this.addValueValue
      })
      this.addValueValue = ''
    },

    deleteAddValue(i) {
      this.addValueList.splice(i, 1)
    },

    getCustom({ id, name }) {
      let obj = {}
      if (id) {
        this.customList.forEach(v => {
          if (v.value === id) {
            obj = v
          }
        })
        obj.name = name
      }
      // 没有传 id，创造一个新的 id
      obj = {
        value: md5(new Date().getTime() + window.$tools.getRandom(10, 1)),
        name
      }
      this.customList.push(obj)
      return obj
    },

    getCustomClass(arrList) {
      const arr = []
      arrList.forEach(v => {
        arr.push(v)
      })
      return arr
    },

    addSku(type) {
      let feature = {}
      const openType = this.openType
      const selectIndex = this.selectIndex
      let desc = ''
      if (!/^.{2,10}$/.test(this.addValueKey)) {
        return this.__notify('警告', '请填写属性名称， 2 - 100个字符', 'warning')
      }
      if (this.addValueList.length <= 0) {
        return this.__notify('警告', '请添加属性值', 'warning')
      }
      // 获取属性
      feature = this.getCustom(openType === 'add' ? { name: this.addValueKey } : { id: this.skuId, name: this.addValueKey })
      // 获取 分类列表（id, name)
      feature.classes = this.getCustomClass(this.addValueList)
      this.isCheckSku2 = false
      this.addValueKey = ''
      this.addValueValue = ''
      this.addValueList = []
      this.dialogVisible2 = false
      desc = feature.classes.join(',')
      this.$emit('getSku', {
        ...feature,
        desc,
        type
      }, openType === 'add' ? -1 : selectIndex)
    },

    async editSku(obj) {
      this.addValueKey = obj.feature.name
      this.addValueList = []
      obj.classes.forEach(v => {
        this.addValueList.push(v)
      })
    }
  }
}
</script>

<style lang='less' scoped>
.el-form--inline .el-form-item {
    width: 100%;
    margin-right: 0;
  }
.u-createAttr {
  .btnWrap {
    display: flex;
    justify-content: flex-end;
  }
}
</style>